<template>
	<div class="father">
		<h3>父组件</h3>

		<!-- <button @click="test(1,2,$event)">点我</button> -->
		<!-- <button @click="test">点我</button> -->

		<h4 v-show="toy">儿子组件的玩具： {{ toy }}</h4>
		<h4> 儿子组件的名字： {{ sonName }}</h4>

		<br />
		<Child @send-toy="saveToy" @send-name="saveName"></Child>




		<!-- 自定义事件  send-toy  -->
		<!-- <Child @send-toy="test"></Child> -->

	</div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
// 数据
let toy = ref('')
let sonName = ref('')

// function test(a,b,x){
// 	console.log('a,b,x:',a,b,x)
// }


// 用于保存传递过来的名字 
function saveName(value: string) {
	console.log('saveName,', value)
	sonName.value = value
}

// 用于保存传递过来的玩具
function saveToy(value: string) {
	console.log('saveToy', value)
	toy.value = value
}
</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}

.father button {
	margin-right: 5px;
}
</style>